<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>我的评价</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,body{height: 100%;background-color: #f8c96f;}
			.mui-bar{width:7.5rem;height: 0.9rem !important;}
			.mui-content{padding:0 !important;margin-top: 0.0rem;}
			.mui-content .title_box{width: 100%;height: 0.77rem;background: red;}
			.mui-control-content {background-color: white;min-height: 215px;}
			.mui-control-content .mui-loading {margin-top: 50px;}
			.mui-table-view{background: #eee;}
			.mui-slider-item{height: 11.7rem !important;}
			.mui-slider-indicator{box-shadow:20px -18px 20px 8px #000;}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border:0;}
			.mui-slider-indicator .mui-active{position: relative;}
			.mui-slider-indicator .mui-active:after{height: 2px;background: #007AFF;content:'';width:0.82rem;position:absolute;bottom: 0;left: 1.45rem;}
			
			.bg_blue{background:#f8c96f;}
			.bg_blue01{background:#79c3f7;}
			.bg_green{background:#60e9e1;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;width: 100%;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.25rem !important;margin:0.09rem 0 0 0.09rem;}
			.mui-table-view .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.mui-table-view .mui-media-body>div{width:100%;float:left;}
			.mui-table-view .mui-media-body .body_view{font-size:.3rem;}
			.mui-table-view .mui-media-body .body_view>span,.mui-table-view .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.mui-table-view .mui-media-body .work_time{color:#b0b0b0;font-size:.24rem;}
			.mui-table-view .mui-media-body .mui-ellipsis{color:#666;font-size:.24rem;overflow:visible;}
			.mui-table-view .icon-more{width:.45rem;float:right;height:.45rem;position:relative;background:url(../../images/work/icon-gd-@2x.png) no-repeat;background-size:100% 100%;}
			.mui-table-view .icon-more>img{margin-top:-.03rem;}
			.mui-table-view .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}
			.mui-table-view-cells{padding:0;margin-bottom:.15rem;background:#fff;position:sticky;}
			
			.mui-pull-bottom-tips{text-align: center;line-height: 0.8rem;}
			.mui-scroll-wrapper{background-color: #eee;}
			.mui-segmented-control.mui-segmented-control-inverted{background-color: #fff;}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						已评价
					</a>
					<a class="mui-control-item" href="#item2mobile">
						未评价
					</a>
				</div>
				<div class="mui-slider-group" id="mui-table-view">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<template v-for="zwfwCaseEvaluate in myEvaluateList[0]">
									<li class="mui-table-view-cells mui-media">
										<div class="mui-media-box">
											<span class="navigate_img bg_green">
											<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
											</span>
											<div class="mui-media-body">
												<div class="body_view">
													<span>{{zwfwCaseEvaluate.servcieName}}</span>
													<div class="icon-more" :data-guid="zwfwCaseEvaluate.oid" :id="zwfwCaseEvaluate.oid" :evalType="1"></div>
												</div>
												<div class="work_time">{{zwfwCaseEvaluate.pjTerm}}</div>
												<div class='mui-ellipsis'>
													<span>评价内容: {{zwfwCaseEvaluate.pjDesc}}</span>
													<div class="zhuangtai">已完成评价</div>
												</div>
											</div>
										</div>
									</li>
									</template>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<template v-for="zwfwCase in myEvaluateList[1]">
									<li class="mui-table-view-cells mui-media">
										<div class="mui-media-box">
											<span class="navigate_img bg_green">
											<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
											</span>
											<div class="mui-media-body">
												<div class="body_view">
													<span>{{zwfwCase.serviceName}}</span>
													<div class="icon-more" :data-guid="zwfwCase.caseId" :id="zwfwCase.caseId" :evalType="2"></div>
												</div>
												<div class="work_time">{{zwfwCase.bjTime}}</div>						
												<div class='mui-ellipsis'>
													<span>审批单位: {{zwfwCase.organName}}</span>
												</div>
												<div class='mui-ellipsis'>
													<span>申请人/申请单位: {{zwfwCase.applyName}}</span>	
													<div class="zhuangtai">未评价</div>
												</div>
											</div>
										</div>
									</li>	
									</template>
								</ul>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!--弹层-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view" id="middlePopoverUl">
					</ul>
				</div>
			</div>
		</div>
	</body>
	    <script>
			function my_immersed(immersed) {}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
	    <script src="../../js/vue.min.js"></script>
	<script>	
		//点击数据弹出操作按钮菜单
			mui('body').on('tap', '[data-guid]', function() {
				var id = this.getAttribute('id');
				var evalType = this.getAttribute('evalType');
				loadMiddlePopoverUl(id,evalType);
				mui('#middlePopover').popover('toggle', document.getElementById(id));
			});

			/**
			 * 加载弹出菜单中的参数值
			 * @param {Object} id
			 * @param {Object} bespeakStatus
			 * @param {Object} phoneNum
			 */
			function loadMiddlePopoverUl(id,evalType) {
				var tempHtml = '';
				if(evalType == 1){//已评价
					//设置弹出菜单的高度，若高度太低内容太多的话 会遮挡住箭头
					 document.getElementById("middlePopover").style.height = 50 + "px";
				      tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='1'>查看评价</a></li>";
				  }else{
				  	  document.getElementById("middlePopover").style.height = 50 + "px";
				      tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='2'>办件评价</a></li>";
				  }
				   document.getElementById("middlePopoverUl").innerHTML = tempHtml;			
			}
			
			mui('#middlePopoverUl').on('tap', 'a', function() {
				var type = this.getAttribute('type');
				var oid = this.getAttribute('id');
				if(type == 1){
				  //查看诉求详细信息
				  showTemplates('../my/my_evaluate_detail.html','评价详情','../my/my_evaluate_detail.html?oid='+oid);
			     //隐藏弹框
			     mui('#middlePopover').popover('hide');	
				}else if(type == 2){
				 //办件评价
				 openNewWin("_www/src/my/my_evaluate_case.html",null,'my_evaluate_case.html',{
				 	oid:oid
				 })
			     mui('#middlePopover').popover('hide');	
				}
			});


			//加载诉求列表信息
			var pageSize = 7;//每页显示的条数
			var maxPageNumber = 1;//最大页数	
			
			var news = new Vue({
				  el: '#mui-table-view',
				  data: {
				  	myEvaluateList:[[],[]]
				  }
				  
			});	
		 	
		 	/**
		 	 * 
		 	 * @param {Object} evalType 评价类型
		 	 * @param {Object} pageNumber页码
		 	 * @param {Object} pageSize 每页显示条数
		 	 * @param {Object} callback 回调函数
		 	 */
			function loadMore(evalType,pageNumber,pageSize,callback) {
		        var param = jsonToParams({
		        	userId:getUser().userId,
		        	idCard:getUser().idCard,
		        	evalType:evalType,
		        	pageNumber:pageNumber,
		        	pageSize:pageSize,
		        	random:Math.random()
		        })
				var url = 'appHttpService/myEvaluate.do';
			    utils.ajax(url, function(data) {
					 callback(data);
				}, param);
				
			};
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Array} items 
			 */
			function convert(items,evalType) {
				var newItems = [];
				if(evalType == 1){//已评价
				   items.forEach(function(item) {
				   	var pjTerm ="";
				   	if(item.pjTerm == 1){
				   		pjTerm = "非常不满意";
				   	}else if(item.pjTerm == 2){
				   		pjTerm = "不满意";
				   	}else if(item.pjTerm == 3){
				   		pjTerm = "基本满意";
				   	}else if(item.pjTerm == 4){
				   		pjTerm = "满意";
				   	}else if(item.pjTerm == 5){
				   		pjTerm = "非常满意";
				   	}
				   	
					 newItems.push({
						oid: item.oid,
						servcieName: item.serviceName,
						pjTerm: pjTerm,
						pjDesc: item.pjDesc,
					});
				  });
				}else{//未评价
				  items.forEach(function(item) {
					newItems.push({
						caseId: item.caseId,
						serviceName: item.serviceName,
						organName: item.organName,
						applyName: item.applyName,
						bjTime: item.bjTime
					});
				 });
				}				
				return newItems;
			}			
		 	
		    $(function(){
				 $('.mui-bar-nav~.mui-content').height($(window).height()-45+'px')
			});		
		    mui.init();
		    var pages = [0,0];
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.plusReady(function() {													
					//循环初始化所有上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								auto:true,
								callback: function() {
									var self = this;
									var ul = self.element.querySelector('.mui-table-view');
									var thisPage = pages[index]+1;
									pages[index] = thisPage;
									 //evalType  1-未评价 2-已评价          
	                                 var evalType = index + 1;
									loadMore(evalType,thisPage,pageSize,function (data){	
										//console.log(data);
										//console.log(evalType);
									   	data = JSON.parse(data);
										if(data.state == 0 && data.total > 0) {
											maxPageNumber = data.maxPageNumber;
											var rows = null;
											if(evalType == 1){//已评价
												rows = JSON.parse(data.zwfwCaseEvaluateVo);
												if(thisPage <= maxPageNumber){
									     	        if(data.state == 0 && rows.length < pageSize){
														self.endPullUpToRefresh(true);
													 }else{
														self.endPullUpToRefresh();
												     }
											    }else{
										           self.endPullUpToRefresh(true);
										        }	
											}else{//未评价
												rows = JSON.parse(data.zwfwCaseListVo);
												if(thisPage <= maxPageNumber){
									     	        if(data.state == 0 && rows.length < pageSize){
														self.endPullUpToRefresh(true);
													 }else{
														self.endPullUpToRefresh();
												     }
											    }else{
										            self.endPullUpToRefresh(true);
										        }	
											}
											if(rows != null && rows.length > 0){
												//根据index先清空原有数据中的对应的list内容，避免数据重复
												//Vue.set(news.myEvaluateList,index, news.myEvaluateList[index]=[]);
												news.myEvaluateList[index] = news.myEvaluateList[index].concat(convert(rows,evalType));	
												Vue.set(news.myEvaluateList,index, news.myEvaluateList[index]);								
											}
										  }else{
										  	self.endPullUpToRefresh(true);
										  }
									   });
										
								}
							}	
						});
					});
				});
			})(mui);				
	</script>
</html>